import { Cascader } from "@ct0/ui";
import React, { useState } from "react";

export default function CascaderPanel() {
  const [value, setValue] = useState(["zj", "hangzhou"]);
  const options = [
    {
      label: "福建",
      value: "fj",
      children: [
        {
          label: "福州",
          value: "fuzhou",
          children: [{ label: "马尾", value: "mawei" }],
        },
        { label: "泉州", value: "quanzhou" },
      ],
    },
    {
      label: "浙江",
      value: "zj",
      children: [
        {
          label: "杭州",
          value: "hangzhou",
          children: [{ label: "余杭", value: "yuhang" }],
        },
      ],
    },
    {
      label: "北京",
      value: "bj",
      children: [
        { label: "朝阳区", value: "chaoyang" },
        { label: "海淀区", value: "haidian" },
      ],
    },
  ];

  return (
    <div>
      <h2>Cascader 级联菜单</h2>
      <div>
        级联扩展菜单
        <br />
        <br />
        当前不足：
        <ul>
          <li>当前只支持单选</li>
          <li>当前不支持异步</li>
        </ul>
      </div>
      <h2>Demo</h2>
      <Cascader
        placeholder="选个地方"
        value={value}
        options={options}
        // allowClear={false}
        onChange={setValue}
      />
      <br />
      已选值：{JSON.stringify(value)}
      <h2>API</h2>
      <table border="1" cellPadding="5">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>value</td>
            <td></td>
            <td>值</td>
            <td>
              string 或 number 的<b>数组</b>
            </td>
            <td></td>
          </tr>
          <tr>
            <td>options</td>
            <td>必填</td>
            <td>可选项</td>
            <td>包含 label、value、childre（递归类型）</td>
            <td></td>
          </tr>
          <tr>
            <td>disabled</td>
            <td></td>
            <td>按钮禁用状态</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>placeholder</td>
            <td></td>
            <td>空值提示字符</td>
            <td></td>
            <td>""</td>
          </tr>
          <tr>
            <td>allowClear</td>
            <td></td>
            <td>删除按钮</td>
            <td></td>
            <td>""</td>
          </tr>
          <tr>
            <td>changeOnSelect</td>
            <td></td>
            <td>有下级的时候是否允许点击选中</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
